<template>
    <div class="app-header-lang">
        <a-dropdown v-if="localList.length > 1" :trigger="['click']" overlayClassName="dropdown-lang-list">
            <span>{{ caption }}</span>
            <template #overlay>
                <a-menu @click="selectLang">                 
                    <a-menu-item v-for="(item) in localList" :class="item.type == $i18n.locale ? 'active-item' : ''" :name="item.type" :key="item.type">{{item.name}}</a-menu-item>                    
                </a-menu>
            </template>
        </a-dropdown>
    </div>
</template>
<script lang = 'ts'>
import { Component, Vue } from 'vue-property-decorator';
import { localList } from '@/locale/locale-util';

@Component({})
export default class AppLang extends Vue {

    /**
     * 本地语言资源
     *
     * @type {*}
     * @memberof AppLang
     */
    public localList: any[] = localList;

    /**
     * 标题
     *
     * @type {(string | null)}
     * @memberof AppLang
     */
    public caption: string | null = null;


    /**
     * vue 生命周期
     *
     * @memberof AppLang
     */
    public mounted() {
        let lang: string = this.$i18n.locale;
        const local: any = this.localList.find((_local: any) => Object.is(_local.type, lang));
        this.caption = local.name;
    }

    /**
     * 选择语言
     *
     * @param {*} $event
     * @memberof AppLang
     */
    public selectLang($event: any): void {
        this.$i18n.locale = $event.key;
        const local: any = this.localList.find((_local: any) => Object.is(_local.type, $event.key));
        this.caption = local.name;
        localStorage.setItem('local', $event.key);
        window.location.reload();
    }

}
</script>
<style lang="less">
@import './app-lang.less';
</style>